<template>
  <div class="task-test-view" v-loading="loading">
    
    <div class="task-test-view__input">
      <el-input
        placeholder="请输入自然语言"
        v-model="value"
      >
      </el-input>
      <div>
        <el-button type="primary" @click="handleClick">
          提交
        </el-button>
      </div>
    </div>
    
    <div class="task-test-view__result">
      <el-input
        type="textarea"
        :rows="12"
        disabled
        v-model="result"
      >
      </el-input>
    </div>
    
  </div>
</template>

<script>

import { taskTest } from "@src/api/AIApi";

export default {
  name: "index",
  data() {
    return {
      value: "",
      result: "",
      loading: false,
    };
  },
  methods: {
    handleClick() {
      
      this.loading = true
      
      const params = {
        question: this.value,
      }
      
      taskTest(params).then(res => {
        this.result = JSON.stringify(res.data, null, 2)
      }).finally(() => {
        this.loading = false
      })
      
    },
  },
}
</script>

<style lang="scss">
.task-test-view {
  padding: 20px;
}

.task-test-view__input {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.task-test-view__result {
  background-color: #f5f7fa;
  padding: 20px;
}
</style>